<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
</style>

<body>
    <div id="myDiv" class="bd" title="Body Text" data-appid="12345" data-myname="whmk" style="height:600px;border: 1px solid #eee">
        div这个是用来测试
    </div>
    <div id="myDiv2" style="height: 200px;border: 1px solid #999"></div>
    <div id="myDiv3" style="height: 200px;border: 1px solid #ddd"></div>
    <form action="#" id="myForm">
        <input type="text" />
    </form>
    <button id="backTop">回到顶部</button>
</body>
<script>
    window.onload = function () {
        var myDiv = document.getElementById("myDiv");
        var myDiv2 = document.getElementById("myDiv2");
        var myDiv3 = document.getElementById("myDiv3");
        // scroll 事件
        (function () {
            window.onscroll = function () {
                console.log("滚动距离top的像素：")
                if (document.compatMode === "CSS1Compat") {
                    if (document.documentElement.scrollTop > 150) {
                       // console.log(document.documentElement.scrollTop);
                    }
                } else {
                    console.log(document.body.scrollTop);
                }
            }

            var backTop = document.getElementById("backTop");
            backTop.onclick = function () {
                if ((document.documentElement.scrollTop || document.body.scrollTop) > 100) {
                    document.documentElement.scrollTop = 0;
                    document.body.scrollTop = 0;
                }
            }
        })();
        // 客户区坐标位置
        (function () {
            myDiv.onclick = function () {
                var event = window.event;
                console.log("在视图中的坐标位置（基于视口的大小）：" + "x:" + event.clientX + ',y:' + event.clientY);
            }
        })();
        // 页面坐标位置
        // 页面没有滚动的情况下，pageY、pageX与clientY、clientX相同
        (function () {
            myDiv2.onclick = function () {
                var event = window.event;
                console.log("在页面上的坐标位置（基于页面本身的大小）：" + "x:" + event.pageX + ',y:' + event.pageY);
            }
        })();
        // 屏幕坐标位置
        // 相对于整个电脑屏幕，不管浏览器窗口缩小扩大
        (function () {
            myDiv3.onclick = function () {
                var event = window.event;
                console.log("在屏幕上的坐标位置（基于电脑屏幕本身的大小）：" + "x:" + event.screenX + ',y:' + event.screenY);
            }
        })();
        //鼠标滚轮事件
        (function () {
            myDiv.onmousewheel=function(){
                var event=window.event;
                console.log("鼠标滚轮事件："+event.wheelDelta);
                if(event.wheelDelta>0){
                    console.log("方向向上");
                }else{
                    console.log("方向向下");
                }
            }
        })(); 
    }
</script>



</html>